import MyContext from "./MyContext"
import React, { Component } from "react"
import MyButton from "./MyButton"

class MsgBox extends Component {
  render() {
    return (
      // 数据的使用者，用Consumer组件
      <MyContext.Consumer>
        {/* 在Context.Consumer 组件里面，通过一个回调函数来获取到外层组件提供的数据 */}
        {
          (context) => {
            // console.log(context);//list: Array(2), addMsg: ƒ}
            return (
              <>
                {
                  context.list.map(el => {
                    return (<p key={el.id}>{el.msg}</p>)
                  })
                }

                {/* <button type="button" onClick={() => {
                  context.addMsg('哈哈哈哈')
                }}>add msg</button> */}
                <MyButton></MyButton>
              </>
            )
          }
        }
      </MyContext.Consumer>
    )
  }
}

export default MsgBox